<template>
  <div class="system-info">
    <!-- 面包屑 -->
    <div class="bread-crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>流程模型</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-middle">
      <el-card class="box-card">
        <!-- 查询条件 -->
        <el-row class="table-selbox" v-if="btnSel">
          <!-- 查询条件表单 -->
          <el-form :inline="true" :model="formInline" >

                <!-- 所属公司 -->
                <el-form-item label="所属公司">
                  <el-select
                    v-model="formInline.compId"
                    filterable
                    auto-complete="off"
                    placeholder="请选择"
                  >
                    <el-option label="无" value></el-option>
                    <!-- 循环所有角色 公司名称 公司ID -->
                    <el-option
                      v-for="(item,index) in compList"
                      :key="index"
                      :label="item.compName"
                      :value="item.compId"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <!-- 流程名称 -->
                <el-form-item label="流程名称">
                  <el-select
                    v-model="formInline.flowId"
                    filterable
                    auto-complete="off"
                    placeholder="请选择"
                    style="width:150px;"
                  >
                    <el-option label="无" value></el-option>
                    <!-- 循环所有角色 角色名称 角色ID -->
                    <el-option
                      v-for="(item,index) in flowList"
                      :key="index"
                      :label="item.flowName"
                      :value="item.flowId"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="所属分类">
                  <el-select v-model="formInline.flowType" style="width:100px;">
                    <el-option label="无" value></el-option>
                    <el-option label="人事审核" value="人事审核"></el-option>
                    <el-option label="工作审核" value="工作审核"></el-option>
                    <el-option label="项目审核" value="项目审核"></el-option>
                  </el-select>
                </el-form-item>

                <el-form-item label="关联表单">
                  <el-select
                    v-model="formInline.formId"
                    filterable
                    auto-complete="off"
                    placeholder="请选择"
                    style="width:150px;"
                  >
                    <el-option label="无" value></el-option>
                    <!-- 循环所有角色 角色名称 角色ID -->
                    <el-option
                      v-for="(item,index) in formList"
                      :key="index"
                      :label="item.formName"
                      :value="item.formId"
                    ></el-option>
                  </el-select>
                </el-form-item>

                <!-- 搜索 -->
                <el-form-item>
                  <el-button icon="el-icon-search" @click="selHandle">搜索</el-button>
                </el-form-item>

          </el-form>
        </el-row>
        <!-- 基本操作按钮 是否授权显示-->
        <el-row class="table-btns" v-if="[btnAdd,btnDel,btnUpload,btnDown].indexOf(true) > -1">
          <!-- 添加 -->
          <el-button
            v-if="btnAdd"
            type="success"
            size="medium"
            icon="el-icon-document-add"
            @click="addHandle"
          >添加</el-button>
          <!-- 删除 -->
          <el-button
            type="danger"
            size="medium"
            icon="el-icon-delete"
            @click="batchRemove"
            v-if="btnDel"
          >删除</el-button>
        </el-row>
        <!-- 数据列表 -->
        <el-table
          :data="menusData"
          border
          @selection-change="selsChange"
          style="width: 100%"
          height="580"
          ref="menusData"
        >
          <!-- 全选 -->
          <el-table-column type="selection" width="40" fixed></el-table-column>
          <!-- 公司名称 -->
          <el-table-column :show-overflow-tooltip="true" prop="compId" label="公司" width="100">
            <template slot-scope="scope">{{ scope.row.compId | compName(compList) }}</template>
          </el-table-column>
          <!-- 流程编号 -->
          <el-table-column :show-overflow-tooltip="true" prop="flowId" label="流程编号" width="150"></el-table-column>
          <!-- 流程名称 -->
          <el-table-column :show-overflow-tooltip="true" prop="flowName" label="流程名称" width="150"></el-table-column>
          <!-- 所属分类 -->
          <el-table-column :show-overflow-tooltip="true" prop="flowType" label="所属分类" width="150"></el-table-column>
          <!-- 当前审批环节 -->
          <el-table-column :show-overflow-tooltip="true" prop="formId" label="关联表单" width="150">
            <template slot-scope="scope">{{ scope.row.formId | formName(formList) }}</template>
          </el-table-column>
          <!-- 备注说明 -->
          <el-table-column :show-overflow-tooltip="true" prop="note" label="备注说明"></el-table-column>
          <!-- 操作列 -->
          <el-table-column
            label="管理"
            fixed="right"
            align="center"
            width="250"
            v-if="[btnDel,btnEdit].indexOf(true) > -1"
          >
            <template slot-scope="scope">
              <!-- 审批历史 -->
              <el-button type="danger" size="mini" @click="handleDelete(scope.row)" v-if="btnDel">删除</el-button>
              <!-- 修改 -->
              <el-button size="mini" @click="editHandle(scope.row)" v-if="btnEdit">修改</el-button>
              <!-- 流程图 -->
              <el-button size="mini" @click="selFlowHandle(scope.row)" v-if="btnSel">流程图</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="table-pageblock">
          <!-- current-page 当前页数  page-size 每页显示数 total 总页数-->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20,50,80,100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-card>
    </div>
    <el-dialog title="流程图" :visible.sync="modalVisible" width="600px">
      <node-data ref="nodeFlow" :nodeData="nodeData"></node-data>
    </el-dialog>
  </div>
</template>

<script>
import NodeData from '@/components/NodeData';
// 引入时间格式化插件
import moment from 'moment';

export default {
  components: {
    NodeData
  },
  // 父组件传值子组件
  props: {
    // 按钮级权限
    btns: {
      type: Object
    }
  },

  // 无白屏刷新方法注入
  inject: ['reload'],

  // 监听
  watch: {
    // 按钮权限数据
    btns (val, oldVal) {
      // 刷新当前页
      this.reload();
    }
  },

  // 实例创建后执行
  created () {
    // 按钮级授权
    this.authorization(this.$store.state.btns);

    // 获取所有公司数据
    this.getCompList();

    // 获取所有表单数据
    this.getFormList();

    this.getFlowList();

    // 加载分页数据
    this.getmenusDataByPage();
  },

  // 过滤器
  filters: {
    // 时间显示过滤
    filterTime (value) {
      return moment(value).format('YYYY-MM-DD HH:mm:ss');
    },

    compName (value, data) {
      if (value === '') {
        return '无';
      } else {
        for (let i = 0; i < data.length; i++) {
          if (data[i].compId === value) {
            return data[i].compName;
          }
        }
      }
    },

    formName (value, data) {
      if (value === '') {
        return '无';
      } else {
        for (let i = 0; i < data.length; i++) {
          if (data[i].formId === value) {
            return data[i].formName;
          }
        }
      }
    }
  },

  // 当前页面数据
  data () {
    return {
      // 屏蔽重复提交
      isSubmit: false,

      compList: [],

      flowList: [],

      formList: [],

      // 流程图预览数据
      nodeData: {},
      modalVisible: false,
      // 按钮显示隐藏  - 默认值
      btnSel: true,
      btnDel: true,
      btnUpload: true,
      btnDown: true,
      btnAdd: true,
      btnEdit: true,

      // 搜索条件
      formInline: {
        compId: '',
        flowId: '',
        flowType: '',
        formId: ''
      },

      // 列表数据
      menusData: [{}],
      // 当前页
      currentPage: 1,
      // 当前数
      pageSize: 20,
      // 总条目数
      total: 20,

      // 列表选中列
      sels: []
    };
  },
  mounted () {
    // this.getHeight();
    // 增加监听事件，窗口变化时得到高度。
    // window.addEventListener('resize', this.getHeight, false);
  },
  methods: {
    // 表格高度自适应
    // getHeight () {
    // // 获取浏览器高度并计算得到表格所用高度。
    //   this.tableHeight = document.documentElement.clientHeight - 350;
    // },
    // 获取所有表单数据
    getFormList: function () {
      this.$http
        .post('api/findAllForm')
        .then(res => {
          let { code, datas } = res;
          if (code === 0) {
            this.formList = datas;
          }
        })
        .catch(err => {
          if (err === undefined) {
            this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
    },

    // 获取所有公司数据
    getCompList: function () {
      this.$http
        .post('api/findAllCompNoPage')
        .then(res => {
          let { code, datas } = res;
          if (code === 0) {
            this.compList = datas;
          }
        })
        .catch(err => {
          if (err === undefined) {
            this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
    },

    // 获取所有流程数据
    getFlowList: function () {
      this.$http.raw('api/findAllFlow').then(res => {
        let { code, datas } = res;
        if (code === 0) {
          this.flowList = datas;
        }
      }).catch(err => {
        if (err === undefined) {
          this.$message({
            message: '服务器响应异常！',
            type: 'error'
          });
          return false;
        }
      });
    },

    // 按钮级授权
    authorization (data) {
      for (let i in data) {
        if (data['sel'] === 0) {
          this.btnSel = false;
        }
        if (data['add'] === 0) {
          this.btnAdd = false;
        }
        if (data['del'] === 0) {
          this.btnDel = false;
        }
        if (data['upload'] === 0) {
          this.btnUpload = false;
        }
        if (data['down'] === 0) {
          this.btnDown = false;
        }
        if (data['edit'] === 0) {
          this.btnEdit = false;
        }
        return i;
      }
    },

    // 显示新增界面
    addHandle: function () {
      this.$router.push('/home/processDesign');
    },

    // 显示修改界面
    editHandle: function (row) {
      this.$router.push({
        path: '/home/processDesign',
        query: {
          datas: row
        }
      });
    },

    // 流程图预览
    selFlowHandle: function (row) {
      this.modalVisible = true;
      this.nodeData = JSON.parse(row.flowJson);
    },

    // 查询
    selHandle: function () {
      // 收集请求数据
      let params = {
        compId: this.formInline.compId,
        flowId: this.formInline.flowId,
        flowType: this.formInline.flowType,
        formId: this.formInline.formId,
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      // 根据公司ID请求对应分页数据结果
      this.$http
        .raw('api/findFlowByCondition', params)
        .then(res => {
          let { code, datas } = res;
          if (code === 0) {
            // 总页数
            this.total = datas.total;
            // 数据结果集
            this.menusData = datas.list;
            // 解决删除当前页数据后仍留在那一页 不跳回上一页的bug
            if (!datas.list.length && this.currentPage !== 1) {
              // 当前页减一
              this.currentPage -= 1;
              // 调用自己
              this.getmenusDataByPage();
            }
          }
        })
        .catch(err => {
          if (err === undefined) {
            this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
    },

    // 删除
    handleDelete (data) {
      // 删除二次确认
      this.$confirm('确认删除选中的信息吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          // 收集请求参数
          let params = [data.id];
          // 根据部门ID删除对应部门数据
          this.$http
            .raw('api/batchDelFlow', params)
            .then(res => {
              let { code } = res;
              if (code === 0) {
                this.$message({
                  type: 'success',
                  message: '删除成功！'
                });
                // 刷新列表
                this.getmenusDataByPage();
              }
            })
            .catch(err => {
              if (err === undefined) {
                this.$message({
                  message: '服务器响应异常！',
                  type: 'error'
                });
                return false;
              }
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    // 全选、单选、多选
    selsChange: function (sels) {
      this.sels = sels;
    },
    // 批量删除
    batchRemove: function () {
      // 判断是否选中数据
      if (!this.sels.length) {
        this.$message({
          type: 'info',
          message: '您还没选择任何数据！'
        });
        return;
      }
      // 删除二次确认弹窗
      this.$confirm('确认删除选中的信息吗？', '提示', {
        type: 'warning'
      })
        .then(() => {
          // 修改状态，逻辑删除
          let params = [];
          this.sels.map(item => {
            return params.push(item.id);
          });
          this.$http
            .raw('api/batchDelFlow', params)
            .then(res => {
              let { code } = res;
              // 判断Code状态
              if (code === 0) {
                this.$message({
                  type: 'success',
                  message: '批量删除成功！'
                });
                // 刷新列表
                this.getmenusDataByPage();
              }
            })
            .catch(err => {
              if (err === undefined) {
                this.$message({
                  message: '服务器响应异常！',
                  type: 'error'
                });
                return false;
              }
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },

    // 刷新页面数据
    getmenusDataByPage () {
      // 收集请求参数
      let params = {
        compId: '',
        flowId: '',
        flowType: '',
        fromId: '',
        pageNum: this.currentPage,
        pageSize: this.pageSize
      };
      this.$http
        .raw('api/findFlowByCondition', params)
        .then(res => {
          let { code, datas } = res;
          // 判断Code状态
          if (code === 0) {
            // 总页数
            this.total = datas.total;
            // 数据结果集
            this.menusData = datas.list;
            // 解决删除当前页数据后仍留在那一页 不跳回上一页的bug
            if (!datas.list.length && this.currentPage !== 1) {
              // 当前页减一
              this.currentPage -= 1;
              // 调用自己
              this.getmenusDataByPage();
            }
          }
        })
        .catch(err => {
          if (err === undefined) {
            this.$message({
              message: '服务器响应异常！',
              type: 'error'
            });
            return false;
          }
        });
    },

    // 每页显示的条数改变
    handleSizeChange (val) {
      this.pageSize = val;
      // 调用刷新页面
      this.getmenusDataByPage();
    },
    // 当前页码
    handleCurrentChange (val) {
      this.currentPage = val;
      // 调用
      this.getmenusDataByPage();
    }
  }
};
</script>

<style lang='scss' scoped>
@import './index.scss';
</style>
